import React from 'react';
import axios from 'axios';
import {Button, Form, DatePicker, Card, Input, message, Divider} from 'antd';
import Grid from '../../components/table/grid';
import moment from 'moment';
import {sessionManager} from '../../utils/sessionStorage';
import { injectIntl } from 'react-intl';
import SassNotification from '../../components/notification/notification'



const RangePicker = DatePicker.RangePicker;

@Form.create()
class StaffRecharge extends React.Component {

    constructor(Props) {
        super(Props);
        this.time = [moment().subtract(1, 'days'), moment()];
        this.onChange = this.onChange.bind(this);
        this.state = {
            selectUrl: '/api/corp/subAcc/qry',
            refresh: 0,
            data:{},
            params: {
                account: '',
                startTime: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
                endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                createAccount: ''
            }
        };
        const common = this.props.intl.messages.common;
        this.columns = [{
            title: common.userAccount,
            dataIndex: 'account',
            width: '20%',
            key: 'account',
        }, {
            title: common.rechargeAmount,
            dataIndex: 'amount',
            width: '20%'
        }, {
            title: common.operationTime,
            dataIndex: 'createTime',
            width: '20%'
        }, {
            title: common.operationAccount,
            dataIndex: 'createAccount',
            width: '20%'
        }, {
            title: common.remark,
            dataIndex: 'info',
            width: '20%'
        }]
    }


    componentWillMount() {
        this.statistics()
    }
    statistics=()=>{
        axios.post('/api/statistics/user/recharge/qry', {
            ...this.state.params
        }).then(res => {
            if (res && res.code == 200) {
                this.setState(Object.assign(this.state.data,res.data));
            }
        });
    }



    componentDidMount() {
        document.querySelectorAll('.box').forEach((item) => {
            item.setAttribute('style', 'width:33.3%')
        })
    }


    onChange(value, dateString) {
        if(value && value.length > 0){
            this.setState(Object.assign(this.state.params, {
                startTime: value[0].format('YYYY-MM-DD HH:mm:ss'),
                endTime: value[1].format('YYYY-MM-DD HH:mm:ss')
            }));
        }else{
            this.setState(Object.assign(this.state.params,{startTime:'',endTime:''}));
        }  
    } 
      

    search(value) {
        this.setState({
            params: {...value},
            refresh: this.state.refresh + 1
        });

        axios.post('/api/statistics/user/recharge/qry', {
            ...this.state.params
        }).then(res => {
            if (res && res.code == 200) {
                this.setState({
                    rechargeCnt: res.data.rechargeCnt,
                    amountSum: res.data.amountSum
                });
            }
        });

        this.statistics();
    }

    export(value) {
        axios.post('/api/user/recharge/export', {
            ...this.state.params
        }).then(res => {
            if (res && res.code == 200) {

            }
        });
    }

    handleChange(key, event) {
        this.setState(Object.assign(this.state.params, {[key]: event.target.value}));
    }

    staffTotal = () => {
        this.props.history.push('/finance/staffTotal');
    }


    render() {
        const cardStyle = {
            width: '50%',
            textAlign: 'center',
            marginBottom: '20px',
            display: 'inline-block'
        };
        const token=(JSON.parse(sessionStorage.getItem("token"))||{}).token;
        const common = this.props.intl.messages.common;
        let locale=sessionManager.get('locale');
        return (
            <div>
                <SassNotification></SassNotification>
                <div style={{marginTop: 20}}>
                    <div style={{display:'flex',justify:'space-around',lineHeight:'32px'}}>
                        {common.rechargeTime} ：<RangePicker showTime format="YYYY-MM-DD HH:mm:ss" defaultValue={this.time}
                                           onChange={this.onChange} style={{marginRight: 20}}/>
                        <Input placeholder={common.userAccount} onChange={event => this.handleChange('account', event)} id="account"
                               style={{width: 160, marginRight: 20}}/>
                        <Input placeholder={common.operationAccount} onChange={event => this.handleChange('createAccount', event)}
                               id="createAccount" style={{width: 160, marginRight: 20}}/>
                    </div>
                    <br/>
                    <div className="SC-flex-right">
                        <Button type="primary" className="ant-btn-84"  onClick={() => this.search({
                            account: document.getElementById('account').value,
                            startTime: this.state.params.startTime,
                            endTime: this.state.params.endTime,
                            createAccount: document.getElementById('createAccount').value
                        })}>{common.search}</Button>
                        <a href={`${axios.defaults.baseURL}/api/user/recharge/export?account=${this.state.params.account?this.state.params.account:''}&startTime=${this.state.params.startTime?this.state.params.startTime:''}&endTime=${this.state.params.endTime?this.state.params.endTime:''}&createAccount=${this.state.params.createAccount?this.state.params.createAccount:''}&token=${token}&locale=${locale}`}>
                            <Button className="ant-btn-84" style={{marginRight: 8}} type="primary">{common.exportStatement}</Button>
                        </a>
                        <Button className="ant-btn-84" type="primary" onClick={() => this.staffTotal()}>{common.rechargeStats}</Button>
                    </div>
                    <br/>
                    <div className="boxOuter">
                        <div className="box">
                            <div className="num">{this.state.data.rechargeCnt}</div>
                            <div>{common.rechargeNumber}</div>
                        </div>
                        <div className="box">
                            <div className="num">{this.state.data.amountSum}</div>
                            <div>{common.rechargeAmount}</div>
                        </div>
                        <div className="box">
                            <div className="num">{Math.abs(this.state.data.refundAmountSum||0)}</div>
                            <div>{common.refundAmountSum}</div>
                        </div>
                    </div>
                    <Grid refresh={this.state.refresh} params={this.state.params} columns={this.columns}
                          url="/api/statistics/user/recharge/detail/qry"/>
                </div>
            </div>
        );
    }
}

export default injectIntl(StaffRecharge);